/*****************************************************
*
*     Read me
*
******************************************************/
// Install yarn with 'yarn'
// Compile this less file with 'yarn compile'



/*****************************************************
*
*     Imports
*
******************************************************/


//
// UIKit Core
//
@import "../src/less/uikit.less";

//
// Stageone Customizings
//
@import "../../lib/css/so-uikit-config.less";
@import "../../lib/css/so-less-lib.less";
@import "../../lib/css/so-css-plugins.less";
@import "../../lib/css/so-template-base-styles.less";



/*****************************************************
*
*     Stageone Template
*
******************************************************/

//
// Phone portrait
//

body {
  .fontSmoothing();
}

#slideshow-home-container {
  .transition();
  opacity: 0;
  visibility: hidden;
}

.homepage {
  #slideshow-home-container {
    opacity: 1;
    visibility: visible;
  }

  #metatitle-follow-container, #metatitle-follow-sticky-container {
    opacity: 0;
    visibility: hidden;
  }
}

.is-not-visible {
  position:absolute;
  top:-100000px;
}

a, .uk-link, .uk-button, button, input[type="button"],
.uk-form-label {
  .transition();
}

.uk-list-bullet.list-bullet-color-a > li::before { background-image:url('/themes/stageone_4.0/assets/images/list-bullet-color-a.svg') }
.uk-list-bullet.list-bullet-color-c > li::before { background-image:url('/themes/stageone_4.0/assets/images/list-bullet-color-c.svg') }
.uk-list-bullet.list-bullet-color-d > li::before { background-image:url('/themes/stageone_4.0/assets/images/list-bullet-color-d.svg') }

/*
.uk-list-divider.uk-list-bullet > li:nth-child(n+2) {
  &:before {
    top:@list-divider-margin-top;
  }
}
*/


.js-filter {
  &.uk-list-divider > li {
    .transition();
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:@list-divider-margin-top !important;
    padding-bottom:@list-divider-margin-top !important;
    border-top:@global-border-width solid darken(@color-base-d,0%);
  }
}

.js-filter {
  &.uk-list-divider > li.uk-open {
   padding-bottom:0 !important;
  }
}

.uk-overlay-gradient {
  .tripleGradient(rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0.45),0%,50%,100%,0deg);
}

.background-gradient-muted, .uk-background-muted, .uk-background-muted {

  .uk-list-divider > li {
    border-top-color:darken(@color-base-d,0%);
  }

  .uk-heading-divider, hr, .border-right {
    border-color:darken(@color-base-d,0%);
  }

}

.uk-overlay-primary {
  &.overlay-light {
    background: rgba(0,0,0,0.2);
  }
}

.uk-open {
  > .accordion-toggle {
    color:@color-a;
  }
}

#header-default {display:block;}
#header-sticky {margin-top:-9999px}

#main-header.uk-sticky.uk-sticky-fixed {
  #header-default {display:none;}
  #header-sticky {margin-top:0px}
}

footer {
  .uk-h3, p, a.uk-link-reset {
    color:@color-white-emphasis !important;
  }

  a.uk-link-reset:hover {
    color:@color-white !important;
  }
}

.uk-logo {
  max-width:180px;
}

.uk-text-meta {
  .fontMedium();
}

.background-gradient-muted {
  .gradient( fade(@global-muted-background, 0%), @global-muted-background, 0%,66%);
}

#mobile-navigation, #main-navigation, #meta-navigation {
  a {
    text-decoration: none;
  }
}

#meta-navigation{
  > li {
    display: none;
    &.is-meta-navigation {
      display: block;
    }
  }
}

.uk-icon {
  &.stroke {
    svg {
      stroke:currentColor;
      stroke-width: 1;
      overflow: visible;
    }

  }
}

ul.uk-nav-sub.level_3 {
  padding-bottom:15px;
}

.uk-slidenav {
  .transition();
  opacity: 1;
  &.uk-invisible {
    opacity: 0;
  }
}

.stageone-link {
  color:rgba(255,255,255,0.2) !important;
  &:hover {
    color:rgba(117,152,186,1) !important;
  }
}

.uk-button-default, .uk-button-primary, .uk-button-secondary, .uk-button-text {
  text-decoration: none;
  padding-top:5px;
  padding-bottom:5px;
}


.uk-button-default, .uk-button-primary, .uk-button-secondary {
  padding-top:10px;
  padding-bottom:10px;
  .roundedCorners(0,0,0,12px);
  .fontMedium();
}

.uk-button-text {
  text-align:left;
}

.uk-button-link {
  text-align:left;
  font-size:1em;
}
.icon-button {
  position: relative;
  margin-left: 35px;
  > svg {
    position: absolute;
    bottom: 1px;
    left: -30px;
    width:30px;
    padding-right: 5px;
  }
}


@iconOffset:15px;
@iconRMargin:2px;
@iconRGap:10px;
@iconLOffset:4px;

.uk-button-text.animated-button {

  .no-transition();
  text-decoration: none;
  text-align:left;

  .btn-container {
    .btn-label{
      .transition(all 0.2s ease-in);
      transition-delay: 0.2s;
      margin-right:@iconOffset + @iconRGap + @iconLOffset;
    }

    .uk-icon {
      .transition(all 0.2s ease-in);
      transition-delay: 0.2s;
      margin-left:-@iconOffset;
      opacity: 0;
      visibility: hidden;
      vertical-align: 2px;

    }
  }

  &:hover {
    .btn-container {

      .btn-label{
        margin-right:0px;
        transition-delay: 0s;
      }

      .uk-icon {
        margin-left:@iconLOffset;
        margin-right:@iconRGap;
        transition-delay: 0s;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

.uk-button-text.animated-centered-button {

  .no-transition();
  text-decoration: none;
  text-align:center;
  height:55px;

  .btn-container {

    .uk-icon {
      .transition(all 0.2s ease-in);
      transition-delay: 0.2s;
      margin-top:-25px;
      margin-bottom:14px;
      opacity: 0;
      visibility: hidden;
    }

    .btn-label{
      .transition(all 0.2s ease-in);
      transition-delay: 0.2s;
    }

  }

  &:hover, &.uk-active {
    .btn-container {

      .uk-icon {
        margin-top:0px;
        margin-bottom:5px;
        transition-delay: 0s;
        opacity: 1;
        visibility: visible;
        color:@color-white;
      }

      .btn-label{
        margin-right:0px;
        transition-delay: 0s;
        color:@color-white;
      }

    }
  }
}

.uk-active {
  > .uk-button-text.animated-button {
    color:@global-link-hover-color;
    .btn-container {

      .btn-label{
        margin-right:0px;
      }

      .uk-icon {
        margin-left:@iconLOffset;
        margin-right:@iconRGap;
        opacity: 1;
        visibility: visible;
        .rotate(90deg);
      }
    }
  }
}

// active navigation item
.active {
   > .uk-button-text.animated-button {
    color:@color-white;
    .btn-container {

      .btn-label{
        margin-right:0px;
      }

      .uk-icon {
        margin-left:@iconLOffset;
        margin-right:@iconRGap;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

.starter_active {
  > div > .uk-button-text.animated-button {
    color:@color-white;
    .btn-container {

      .btn-label{
        margin-right:0px;
      }

      .uk-icon {
        margin-left:@iconLOffset;
        margin-right:@iconRGap;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

.uk-button-text.animated-multiple-button {

  text-decoration: none;
  text-align:left;
  overflow: hidden;
  padding-top:10px;
  padding-bottom:10px;
  line-height: 1.3em;

  .txt-container {
    overflow: hidden;
    height: 46px;
  }

  .icon-container {
    position: relative;
    width:34px;
    height:34px;
    .default-icon {
      .transition2x(top 0.2s ease-in, opacity 0.2s ease-in);
      opacity: 1;
      position:absolute;
      top:2px;
      left:2px;
    }
    .hover-icon {
      .transition2x(top 0.2s ease-in, opacity 0.2s ease-in);
      opacity: 0;
      position:absolute;
      top:-32px;
      left:8px;
    }
  }

  &:hover {
    .default-icon {
      opacity: 0;
      top:32px;
    }
    .hover-icon {
      opacity: 1;
      top:8px;
    }
  }

}



.offset-section {
  //margin-top:150px;

  > div {
    margin-bottom:-80px !important;
    .transform(translate(0,-80px));
  }

}

.offset-inverse-section {
  padding-bottom:80px;

  > div {
    margin-bottom:-160px !important;
    //.transform(translate(0,150px));
  }

}

.offset-inverse-follow-section {
  padding-top:80px;
}

#modal-navigation {
  .uk-modal-header {
    height:120px;
  }

  .uk-modal-body {
    max-height: 100vh;
    height:100vh;
  }
}

#eyecatcher-section.content-eyecatcher {
  padding-top:120px;
}

.uk-card-muted.uk-card-hover {
  .card-hover-content {
    .transition(max-height 0.75s ease);
    max-height:0;
    .card-hover-inner-content {
      .transition(margin 0.75s ease);
      transition-delay: 0.2s;
      margin-top:0px;
    }
  }

  .card-hover-offset {
    .transition(margin 0.3s ease);
    margin-top:0;
    margin-bottom:0;
  }

  .hover-icon {
    .transition(opacity 0.3s ease);
    opacity: 0;
  }

  .uk-overlay-primary {
    .transition(background 0.3s ease);
  }

}


.uk-card-muted.uk-card-hover:hover {

  .card-hover-content {
    .transition(max-height 1.3s ease);
    max-height:200px;
    .card-hover-inner-content {
      .transition(margin 0.3s ease);
      margin-top:20px;
    }

  }

  .card-hover-offset {
    margin-top:25px;
    margin-bottom:25px;
  }

  .hover-icon {
    opacity: 1;
  }

  .uk-overlay-primary {
    background:fade(@color-black, 75%);
  }
}

.uk-card-default.uk-card-hover {
  .hover-icon {
    .transition(opacity 0.3s ease);
    opacity: 0;
  }
  .uk-overlay-primary {
    .transition(all 0.3s ease);
    opacity: 0;
    margin-bottom: -20px;
  }
}

.uk-card-default.uk-card-hover:hover {

  .hover-icon {
    opacity: 1;
  }

  .uk-overlay-primary {
    opacity: 1;
    margin-bottom:0;
    background:fade(@color-black, 50%);
  }
}

.square-btn {
  width:45px;
  height:45px;
}

.slide-container {
  z-index:800;
  cursor:pointer;
  width:45px;

  .slide-toggle-btn {
    .transition();
    &:hover {
      background: @color-white;
    }
  }

  .slide-static,
  .slide-dynamic {
    .transition();
    overflow:hidden;
  }

  .slide-dynamic {
    width:0px;
    margin-right:45px;
    .square-btn {
      &:hover {
        background: @color-a;
        color:@color-white;
      }
    }
  }

  &.active {
    width:100%;
    .slide-toggle-btn {
      background: @color-a;
      color:@color-white;
    }
    .slide-dynamic {
      width:100%;
    }
  }

}


// form style
.uk-input, .uk-textarea {
  border-bottom:@global-border-width solid @global-border;
}

label {
  .transition();
}

.has-focus {
  label {
    color:@color-a;
  }
  .uk-input, .uk-textarea {
    border-color:@color-a;
  }
}

.ipt-error {
  label {
    color:@color-d;
  }
  .uk-input, .uk-textarea {
    border-color:@color-d;
  }

}

.ipt-valid {
  label {
    color:@color-c;
  }
  .uk-input, .uk-textarea {
    border-color:@color-c;
  }

}


.gradient-overlay-section {
  height: 250px;
}

//
// Tablet portrait
//

@media (min-width: @breakpoint-small) {

  .uk-logo {
    max-width:none;
  }

  #modal-navigation {
    .uk-modal-body {
      max-height: inherit;
      height:inherit;
    }
  }


}



//
// Tablet landscape
//
@media (min-width: @breakpoint-medium) {

  #modal-navigation {
    .uk-modal-header {
      height:150px;
    }
  }

  #eyecatcher-section.content-eyecatcher {
    padding-top:150px;
  }

  .gradient-overlay-section {
    height: 350px;
  }

}


//
// Desktop
//

@media (min-width: @breakpoint-large) {

}

//
// Large screens
//

@media (min-width: @breakpoint-xlarge) {

  #modal-navigation {
    .uk-modal-header {
      height:180px;
    }
  }

  #eyecatcher-section.content-eyecatcher {
    padding-top:180px;
  }


}


//
// Crossbrowser fallback
//

.is-explorer {
  // Empty
}

.is-explorer-11 {
  // Empty
}